<template>
  <div>
    <!-- 右则边栏 赞助人 -->
    <div class="aside" style="background-color: #FFFFFF;">
      <el-divider>赞助人</el-divider>
      <div class="patron">
        <div v-for="patron in patronTop36" :key="patron.id">
          <div>
            <nuxt-link :to="'/user/'+ patron.userId">
              <img class="avatar" :src="patron.avatar" alt="" lazy/>
            </nuxt-link>
          </div>
        </div>
      </div>
      <div class="btn">
        <el-button class="iconfont icon-yiyuanmiaosha" style="font-size: 14px;" @click="openPatron"> 赞助1元</el-button>
        <!-- <br>-->
        <!-- <el-button class="el-icon-s-custom" @click="openSponsor"> 成为VIP赞助人</el-button>-->
        <br>
        <el-button class="el-icon-picture" @click="addLooper"> 投放轮播图片</el-button>
      </div>
    </div>
    <!-- 新增赞助1元 对话框 -->
    <el-dialog
      :width='dialogWidth'
      :visible.sync="isOpenPatron"
      :before-close="handleClosePatron">
      <div>
        <h2 class="title-1"><i class="iconfont icon-yiyuanmiaosha"/> 赞助 1 元</h2>
        <el-form :rules="rules" ref="patronForm" label-position="right" label-width="90px"
                 :model="addPatronData">
          <el-form-item label="赞助金额" prop="amount">
            <el-input-number v-model="addPatronData.amount" :min="1" maxlength="1"/>
          </el-form-item>
          <el-form-item label="赞助致辞" prop="message">
            <el-input v-model.trim="addPatronData.message" clearable :min="1" maxlength="50" show-word-limit
                      placeholder="赞助致辞" @keyup.enter.native="submitAddPatronForm('patronForm')"/>
          </el-form-item>
          <el-form-item label="赞助单号" prop="payNumber">
            <el-input v-model.trim="addPatronData.payNumber" clearable :min="6" maxlength="50" show-word-limit
                      placeholder="请输入纯数字赞助账单号" @keyup.enter.native="submitAddPatronForm('patronForm')"/>
          </el-form-item>
          <el-form-item>
            <p class="el-icon-info"> 温馨提示:</p>
            <div class="ts">
              <ol>
                <li>请确保您已经注册、登录；</li>
                <li>请使用微信或支付宝扫描下图二维码，支付1元，填写赞助致辞、支付单号，点击 [立即赞助]，即可成为赞助人；</li>
                <li>已提交的赞助信息，不能修改或删除；</li>
                <li>已赞助金额，不支持退款；</li>
                <li>赞助区显示最新前36名赞助人头像！</li>
                <li>您可以点击 <a href="/patron" title="查看所有赞助人"> 查看所有赞助人 </a>！</li>
                <li>如果您想成为 VIP 赞助人，那么请点击 <el-button class="el-icon-s-custom" type="primary" plain size="mini" @click="openSponsor"> 成为 VIP 赞助人</el-button></li>
                <li>如果还有其它问题，请添加经历网官方QQ群：572844626 进行交流。</li>
              </ol>
              <img class="img" src="@/assets/img/patron/two.jpg" alt="" lazy/>
              <img class="img" src="@/assets/img/patron/1.png" alt="" lazy/>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="btn-box">
        <span slot="footer" class="dialog-footer">
          <el-button @click="resetForm('patronForm')">重置</el-button>
          <el-button @click="handleClosePatron">取 消</el-button>
          <el-button type="primary" @click="submitAddPatronForm('patronForm')">立即赞助</el-button>
        </span>
      </div>
    </el-dialog>
    <!-- /新增赞助1元 对话框 结束 -->
    <!-- 新增VIP赞助人 对话框 -->
    <el-dialog
      :width='dialogWidth'
      :visible.sync="isOpenSponsor"
      :before-close="handleCloseSponsor">
      <div>
        <h2><i class="el-icon-s-custom"/> 成为VIP赞助人 </h2>
        <el-form :rules="rules" ref="sponsorForm" label-position="right" label-width="90px"
                 :model="addSponsorData">
          <el-form-item label="赞助金额" prop="amount">
            <el-input-number v-model.number="addSponsorData.amount" :min="100" maxlength="99999999"/>
          </el-form-item>
          <el-form-item label="赞助致辞" prop="message">
            <el-input v-model.trim="addSponsorData.message" clearable :min="1" maxlength="50" show-word-limit
                      placeholder="赞助致辞" @keyup.enter.native="submitAddSponsorForm('sponsorForm')"/>
          </el-form-item>
          <el-form-item label="赞助单号" prop="payNumber">
            <el-input v-model.trim="addSponsorData.payNumber" clearable :min="6" maxlength="50" show-word-limit
                      placeholder="请输入纯数字赞助账单号" @keyup.enter.native="submitAddSponsorForm('sponsorForm')"/>
          </el-form-item>
          <el-form-item>
            <p class="el-icon-info"> 温馨提示:</p>
            <div class="ml18">
              <ol>
                <li>请确保您已经注册、登录；</li>
                <li>VIP 赞助人最低赞助100元；</li>
                <li>请使用微信或支付宝扫描下图二维码，支付100元或以上，填写赞助金额、赞助致辞、支付单号，点击立即赞助，即可成为VIP赞助人；</li>
                <li>已提交的赞助信息，不支持修改或删除；</li>
                <li>已赞助金额，不支持退款；</li>
                <li>VIP 赞助区显示最新前10名 VIP 赞助人头像！</li>
                <li>您可以点击 <a href="/patron" title="查看所有赞助人">查看所有 VIP 赞助人</a>！</li>
                <li>如果您想成为赞助商，或还有其它问题，请添加经历网官方QQ群：572844626 进行交流。</li>
              </ol>
              <img class="img" src="@/assets/img/patron/two.jpg" alt=""/>
              <img class="img" src="@/assets/img/patron/2.jpeg" alt=""/>
              <div>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="btn-box">
         <span slot="footer" class="dialog-footer">
           <el-button @click="resetForm('sponsorForm')">重置</el-button>
           <el-button @click="handleCloseSponsor">取 消</el-button>
           <el-button type="primary" @click="submitAddSponsorForm('sponsorForm')">立即赞助</el-button>
        </span>
      </div>
    </el-dialog>
    <!-- /新增VIP赞助人 对话框 结束 -->
  </div>
</template>
<script>
export default {
  name: "patron",
  props: ["patronTop36", "isOpenPatron", "addPatronData", "isOpenSponsor", "addSponsorData", "isOpenSponsor"],
  data() {
    // 校验转账单号为字符串类型数字值
    const validateOrderNumber = (rule, value, callback) => {
      if (isNaN(Number(value))) {
        callback(new Error('请输入数字值赞助账单号'))
      } else {
        callback()
      }
    }
    return {
      // 获取当前登录用户ID和头像 ( 方法参数上传入 store 才能获取 )
      userId: this.$store.state.userInfo && this.$store.state.userInfo.id || 0,
      // 动态改变弹窗的尺寸用
      dialogWidth: '0',
      rules: {
        amount: [
          {required: true, message: '金额不能为空', trigger: 'blur'},
          {type: 'number', message: '金额必须为数字值'}
        ],
        message: [
          {required: true, message: '赞助致辞不能为空', trigger: 'blur'},
          {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
        ],
        payNumber: [
          {min: 6, max: 50, message: '长度在 6 到 50 个数字', trigger: 'blur'},
          {validator: validateOrderNumber, trigger: 'blur'}
        ],
      }
    }
  },
  methods: {
    // 提交赞助1元表单
    async submitAddPatronForm(patronForm) {
      if (this.userId === 0) {
        window.location.href = (`/auth/login?redirectURL=` + window.location.href)
      }
      this.$refs[patronForm].validate((valid) => {
        if (valid) {
          // 触发父组件新增方法
          this.$emit('addPatron', this.addPatronData, this.isOpenPatron);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 打开 新增赞助1元 窗口
    openPatron() {
      // 触发父组件方法
      this.$emit('openPatron');
      const val = document.body.clientWidth;
      const def = 800 // 默认宽度
      if (val < def) {
        this.dialogWidth = '95%'
      } else {
        this.dialogWidth = def + 'px'
      }
    },
    // 关闭赞助1元 窗口
    handleClosePatron() {
      this.$emit('handleClosePatron');
    },
    // 关闭VIP赞助人 窗口
    handleCloseSponsor() {
      // 触发父组件方法关闭窗口
      this.$emit('handleCloseSponsor');
    },
    // 打开 新增VIP赞助人 窗口-动态改变弹窗的宽度
    openSponsor() {
      // 触发父组件新增方法
      this.$emit('openSponsor');
      const val = document.body.clientWidth;
      const def = 800 // 默认宽度
      if (val < def) {
        this.dialogWidth = '95%'
      } else {
        this.dialogWidth = def + 'px'
      }
    },
    // 提交成为VIP赞助人表单
    async submitAddSponsorForm(sponsorForm) {
      if (this.userId === 0) {
        window.location.href = (`/auth/login?redirectURL=` + window.location.href)
      }
      this.$refs[sponsorForm].validate((valid) => {
        if (valid) {
          // 触发父组件新增方法
          this.$emit('addSponsor', this.addSponsorData, this.isOpenSponsor);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 重置表单
    resetForm(sponsorForm) {
      this.$refs[sponsorForm].resetFields();
    },
    // 跳转到新增轮播图页面
    addLooper() {
      window.location = '/looper';
    }
  }
}
</script>
<style lang="less" scoped>

.icon-yiyuanmiaosha {
  font-weight: unset;
}

/* 修改则边栏标题横线颜色 */
.el-divider {
  background-color: #2b2b2b;
}

.el-dialog {
  padding: 30px;

  .title-1 {
    margin-bottom: 50px;
    text-align: center;
  }

  .btn-box {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
  }

  h2 {
    margin-bottom: 50px;
    text-align: center;
  }

  .ts {
    margin-left: 18px;
  }

  .ml18 {
    margin-left: 18px;
  }
}

ol {
  list-style-type: demical;
}

ol li {
  content: counter(sectioncounter) "、";
  list-style-position: outside;
  line-height: 25px;
}

a {
  font-weight: bold;
  color: #8205c6;
}

a:hover {
  text-decoration: underline;
}

// 侧边栏
.aside {
  float: left;
  border-radius: 4px;
  font-size: 16px;

  .patron, .btn {
    padding: 20px;
  }

  .el-button {
    width: 100%;
    color: #cccccc;
    background-color: black;
  }

  .el-button:hover {
    color: white;
  }

  // 赞助人头像
  .avatar {
    width: 35px;
    padding: 2px;
    height: 35px;
    border-radius: 4px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
  }

  .avatar:hover {
    border-radius: 50%;
  }
}

// ----------------- md -------------------->
@media screen and (min-width: 960px) {

  .img {
    height: 200px;
    margin-top: 20px;
    border-radius: 4px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
  }

  // 右则边栏
  .aside {
    width: 23%;
    margin-left: 26px;
    margin-bottom: 20px;

    .patron {

      div {
        display: inline-block;

        img {
          margin-left: 5px;
        }
      }
    }
  }
}

/* sm */
@media screen and (max-width: 960px) {

  // 侧边栏
  .aside {
    width: 100%;

    .patron {
      padding-left: 28px;
      margin-top: 20px;

      div {
        display: inline-block;

        img {
          margin-left: 5px;
        }
      }

    }
  }

  .img {
    width: 100%;
    height: 100%;
    margin-top: 20px;
    border-radius: 4px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
  }
}

</style>
